<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>验证</title>
	<link rel="stylesheet" href="/bootstrap.css">
	<style>
		.container{
			width:500px;
		}
		body{
			height:2000px;
			background:#ccc;
		}
		label{
			font-size:20px;
			color:orange;
		}
		.h3{
			color:#333;
		}
		input.error{
			border: 1px solid red;
		}
	</style>
</head>
<body>
<div class="container">
	<form action="">
		<legend><h2 class="text-center">用户注册表</h2></legend>
		<div class="form-group">
			<label for="username"><h3 class="h3">用户名</h3></label>
			<input type="text" name="username" class="form-control" id="username">
		</div>
		<div class="form-group">
			<label for="password"><h3 class="h3">密码</h3></label>
			<input type="text" name="password" class="form-control" id="password">
		</div>
		<div class="form-group">
			<label for="email"><h3 class="h3">邮箱</h3></label>
			<input type="text" name="email" class="form-control" id="email">
		</div>
		<div class="form-group">
			<label for="phone"><h3 class="h3">手机号</h3></label>
			<input type="text" name="phone" class="form-control" id="phone">
		</div>
		<div>
			<label><h3 class="h3">性别:</h3></label>
				<input type="radio" name="sex" value="boy" id="boy">
				<label for="boy"">男</label>
				<input type="radio" name="sex" value="girl" id="girl">
				<label for="girl"">女</label>
        </div>
        <div>
			<label for=><h3 class="h3">爱好:</h3></label>
            <input type="checkbox" name="hobby" id="game" value="游戏"><label for="game">游戏</label>
            <input type="checkbox" name="hobby" id="bas" value="篮球"><label for="bas">篮球</label>
            <input type="checkbox" name="hobby" id="sing" value="唱歌"><label for="sing">唱歌</label>
            <input type="checkbox" name="hobby" id="dance" value="跳舞"><label for="dance">跳舞</label>
            <input type="checkbox" name="hobby" id="run" value="跑步"><label for="run">跑步</label>
        </div>
		<input type="submit" value="提交" class="btn btn-success">
	</form>
</div>
</body>
<script src="/jquery.min.js"></script>
<script src="/jquery.validate.js"></script>
<script src="/messages_zh.js"></script>
<script>
	$('form').validate({
		submitHandler:function(form){
            alert("信息提交成功!");   	
			form.submit();
			save();
        },    
		debug:true,
		rules:{
			username:'required',
			password:'required',
			username:{
				required:true,
				rangelength:[8,16]	
			},
			email:{
				required:true,
				email:true
			},
			password:{
				required:true,
				rangelength:[6,16]
			},
			
			phone:{
				required:true,
				digits:true,
				minlength:11,
				maxlength:11
			}
			
		},
		messages:{
			username:{
				required:'请输入您的用户名',
				rangelength:'用户名的长度为8-16位'
			},
			email:{
				required:'请输入您的邮箱',
				email:'请您输入正确的邮箱格式'
			},
			password:{
				required:'密码不能为空',
				rangelength:'密码长度为6-16位'
			},
			phone:{
				required:'手机号不能为空',
				digits:'手机号只能是数字,请输入正确的格式',
				minlength:'手机号长度为11位',
				maxlength:'手机号长度为11位'
			}
			
		}
		 
	});
	var username=$('[name=username]')
    var password=$('[name=password]')
    var email=$('[name=email]')
    var phone=$('[name=phone]')
    $.get('/msg',{id:1}).done(function(result){
        username.val(result.username)
        password.val(result.password)
        email.val(result.email)
        phone.val(result.phone)
        $('[value="'+result.sex+'"]').prop('checked',true)
        $.map(result.hobby,function(value){
            $('[value="'+value+'"]').prop('checked',true)
        })
	})
		function save(){
        var data={
            username:username.val(),
            password:password.val(),
            email:email.val(),
            phone:phone.val(),
            sex:$('[name=sex]:checked').val(),
            "hobby":[]
        }
        $('input:checkbox:checked').val(function(index,value){
            data.hobby.push(value);
        })
        console.log(data);
        $.post('/msg',{
            newMsg:JSON.stringify(data)
        }).done(function(result){
            console.log(result);
        })
    }
    
</script>
</html>